<template>
<body>
  <div id="register" >
    <div class="r-header">
      <router-link to="/">
        <img src="../../assets/logo-white.png" alt />
      </router-link>
    </div>
    <div class="r-nav" >
      <div class="r-nav-form" >
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="70px"
          
          class="demo-ruleForm">
          <el-form-item label="昵称" prop="name" >
            <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input type="text" v-model="ruleForm.tel" autocomplete="off"></el-input>
          </el-form-item>
          
          <el-form-item label="" prop="vaildcode" class="r-res" >
            <el-input style="width:69%" type="text"  v-model="ruleForm.vaildcode"  autocomplete="off" placeholder="请输入验证码" ></el-input>
          <el-button type="button" autocomplete="off" @click="getValidCode" >获取验证码</el-button>
          </el-form-item>
          <!-- <el-form-item label="" prop="" class=""> -->
          <router-link to="/login" tag="p" class="r-login">已有账号，去登陆></router-link>
          <!-- </el-form-item> -->

          <el-form-item class="r-res">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
    <div class="r-footer">
      <a href>版权所有@食界 |技术支持@食界IT部</a>
    </div>
  </div>
</body>
</template>
<script>
export default {
  data() {
    //=======注册内容是否标准==========
    var validateText = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入昵称"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateTel = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入手机号"));
      } else if (!/^1[0-9]{10}$/gi.test(value)) {
        callback(new Error("请输入正确格式的手机号"));
      } else {
        callback();
      }
    };
    var validatevaild = (rule, value, callback) => {
      // alert(value)
      if (value == "") {
        callback(new Error("请输入验证码"));
      } else if (value!=this.vaildcode) {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    };
    return {
      
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
        tel: "",
        vaildcode:"",
       
      },
      rules: {
        name: [{ validator: validateText, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        tel: [{ validator: validateTel, trigger: "blur" }],
        vaildcode:[{ validator: validatevaild, trigger: "blur" }]
      },
      username: "",
      pwd: "",
    };
  },
  methods: {
    //========验证页面内容是否标准======
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("注册成功！");
    //===============向数据库传数据===========
 
     this.$axios.post('/api/users/userRegister',{
      userName:this.ruleForm.name,userPwd:this.ruleForm.pass})
     .then((res) => {
    console.log("res:", res);
          
      //注册成功后，利用本地存储将数据传到登录页面
        var newUser={userName:this.ruleForm.name,userPwd:this.ruleForm.pass}
        sessionStorage.setItem('newUser', JSON.stringify(newUser))
        //==========注册成功跳转到登录页面========
         this.$router.push("/Login");
        
        })
        .catch(err => {
          console.log("err:", err);
        });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
   
    },
    //========重置清空=========
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //=======获取验证码=========
  getValidCode(){
     
    this.$axios
    .get("/api/getVailCode",{params:{mobile:this.ruleForm.tel}})
    .then(res=>{
      console.log("res：",res);
     this.vaildcode=this.res.data.data

    })
    .catch(err => {
       console.log("err", err);
    });

  },
    submit() {
      this.$axios
        .get("/api/users/checkUser", { params: { userName: this.username } })
        .then(res => {
          console.log("检验用户名chengong", res);
          if (res.data === 0  ) {
            this.$axios
              .post("/api/users/userRegister", {
                userName: this.username,
                userPwd: this.pwd
              })
              .then(res => {
                console.log("注册成功", res);
              })
              .catch(err => {
                console.log("注册失败", err);
              });
          }
        })
        .catch(err => {
          console.log(" 检验用户名失败", err);
        });
    }
  },
  
};
</script>
<style lang="css" scoped>
@import "../../css/menu/login.css";

</style>

<style lang="scss" scoped>

 .r-header img {
    margin: 1% 0 1% -2%;
  }
 body {
    width: 100%;
    height: 100%;
    background-image: url(../../assets/login_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    
  }
 

 .el-input__suffix {
    
    transition: all .3s;
}


</style>

